<template>
	<view class="page_box">
		<view class="head_box " style="background-color: #92b9b7;">
			<yy-custom bgColor="#92b9b7" isBack="true">
				<block slot="backText"></block>
				<block slot="content">等级激活</block>
			</yy-custom>
		</view>

		<view class="content_box ">
			<view v-if="level == null" @click="show1 = true"
				class="head  margin-bottom padding-lr padding-tb-xs flex justify-between align-center bg-white">
				<text class="f30 text-black">选择等级</text>
				<view class="flex align-center">
					<text class="text-gray margin-right-sm">{{ gde }}</text>
					<text class="cuIcon-triangledownfill " style="font-size: 50rpx;"></text>
				</view>
			</view>
			<view class="info padding flex  bg-white flex-direction">
				<text class="f30 text-black">产品类型</text>
				<view class="commodity margin-top  flex justify-between flex-wrap">
					<view class="commodity-l flex flex-direction " v-for="(item, index) in commodity" :key="index">
						<view class="flex align-center justify-center" style="width: 340rpx; height: 340rpx;">
							<image :src="item.img" mode="aspectFill" class=" radius"
								style="width: 280rpx; height: 280rpx;"></image>
						</view>

						<text class="f30 text-light margin-top-xs flex justify-center">{{ item.name }}</text>
						<!-- <text class="f26 text-gray margin-top-xs flex justify-center">净含量：{{ item.size }}</text> -->
					</view>
				</view>
			</view>
			<view class="submit padding bg-white margin-top ">
				<view @click="show = true" class="flex  align-center justify-between">
					<text class="f30 text-black">产品配置</text>
					<view class="flex align-center">
						<text class="text-gray margin-right-sm">{{ configuration }}</text>
						<text class="cuIcon-triangledownfill " style="font-size: 50rpx;"></text>
					</view>
				</view>
				<view class="flex padding-tb margin-top-sm  ">
					<text class="f30 text-black" style="white-space: nowrap;">原生型</text>
					<view class="wh100  margin-left-xl flex align-center justify-end text-left">
						<input type="number" @input="inputNumA()" v-model="commodityANum" placeholder="请输入产品数量"
							placeholder-class="ddd" />
					</view>
				</view>
				<view class="flex padding-tb-xs" v-if="configuration == '自由配置'">
					<text class="f30 text-black" style="white-space: nowrap;">复合型</text>
					<view class="wh100  margin-left-xl flex align-center justify-end text-left">
						<input type="number" @input="inputNumA()" v-model="commodityBNum" placeholder="请输入产品数量"
							placeholder-class="ddd" />
					</view>
				</view>
				<view class="flex margin-top-sm align-center">
					<text class="cuIcon-notice"></text>
					<text class="f26 text-gray margin-left" style="line-height: 1.5;">
						<!-- indicatorsNum -->
						<!-- 您当前等级激活的库存总数需达到{{indicatorsNumF}}箱.若全部为复合型产品，则只需达到{{indicatorsNum}}箱！ -->
						您当前等级激活的库存总数需达到{{indicatorsNumF}}箱!
					</text>
				</view>
				<view class="" style="height: 120rpx;"></view>
			</view>
			<view class="margin-top-xl padding-lr padding-tb-xs fixed bg-white  flex align-center justify-between">
				<view class="flex align-center">
					<text class="f26 text-black">合计(箱)：</text>
					<text class="margin-left text-red text-bold">{{ commodityTotal ? commodityTotal : '0' }}</text>
				</view>
				<button @click="setPay" class="cu-btn btn flex align-center justify-center">提交</button>
			</view>
		</view>
		<view class="foot_box">
			<u-action-sheet :list="list" v-model="show" @click="click"></u-action-sheet>
			<u-action-sheet :list="list1" v-model="show1" @click="click1"></u-action-sheet>
		</view>
		<!-- 登录提示 -->
		<yy-login v-if="false"></yy-login>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [{
						text: '自由配置'
					},
					{
						text: '全部为复合型'
					}
				],
				list1: [{
						text: 'P1'
					},
					{
						text: 'P2'
					},
					{
						text: 'P3'
					}
				],
				show: false,
				show1: false,
				configuration: '自由配置', //配置
				gde: '', //等级
				id: '',
				commodity: [{
						id: 1,
						img: 'http://ershoucwxxcx.oss-cn-shenzhen.aliyuncs.com/images/2021/05/10/16205883289157755.png',
						name: '液态全活菌（原生型）',
						num: 0,
						repertoryNum: 40,
						size: '5ml×20袋',
						type: '原生型'
					},
					{
						id: 2,
						img: 'http://ershoucwxxcx.oss-cn-shenzhen.aliyuncs.com/images/2021/05/10/16205885855139131.png',
						name: '液态全活菌（复合型）',
						num: 0,
						repertoryNum: 60,
						size: '5ml×20袋',
						type: '复合型'
					}
				],
				commodityANum: '',
				commodityBNum: '',
				commodityTotal: 0,
				level: uni.getStorageSync('data').level,
				indicatorsNum: '',
				indicatorsNumF: '',
			};
		},
		onShow() {},
		onLoad(e) {
			if (this.level != null) {
				this.setPayShengList()
			}
		},
		methods: {
			async setPay() {

				let commodity = [];
				commodity.push({
					commodityId: 1,
					num: Number(this.commodityANum)
				});
				commodity.push({
					commodityId: 2,
					num: Number(this.commodityBNum)
				});
				this.getobj(commodity)
				// if (this.configuration == '自由配置') {
				// 	if (this.commodityANum && this.commodityBNum) {
				// 		var inits = this.commodityANum + this.commodityBNum
				// 		this.getobj(commodity)
				// 	} else if (this.commodityANum) {
				// 		this.getobj([commodity[0]])
				// 	} else {
				// 		this.getobj([commodity[1]])
				// 	}
				// 	// this.getobj(commodity)
				// 	// this.getobj([commodity[0]])
				// } else {
				// 	// this.getobj(commodity)
				// 	this.getobj([commodity[0]])
				// }

			},
			async getobj(order) {
				if (this.level == null) {
					let obj = {
						id: uni.getStorageSync('data').id,
						tel: uni.getStorageSync('data').tel,
						isFirst: 1,
						order,
						level: this.gde,
					};
					//打开加载动画
					this.$refs.loading.open()

					let res = await this.$u.post('/order/activity', obj);
					
					//关闭加载动画
					this.$refs.loading.close()
					
					 
					if (res.code == 0) {
						this.$refs.uToast.show({
							title: '申请成功!',
							type: 'none'
						});
						
						setTimeout( function() {
							uni.navigateBack({
								delta: 1
							})
						},2000)
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'none'
						});
					}
				} else {
					let obj = {
						id: uni.getStorageSync('data').id,
						tel: uni.getStorageSync('data').tel,
						isFirst: 1,
						order,
					};
					let res = await this.$u.post('/order/activity', obj);
					
					if (res.code == 0) {
						uni.navigateBack({
							delta: 1
						})
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'none'
						});
					}
				}
			},

			async setPaySheng() {
				let res = await this.$u.post('/order/activity', );
				if (res.code == 1) {}
			},

			async setPayShengList() {
				let res = await this.$u.get('/orderindicators/list', {
					level: uni.getStorageSync('data').level,
					kind: 1,
				});
				if (res.code == 0) {
					this.indicatorsNumF = res.data[1].indicators
					this.indicatorsNum = res.data[0].indicators
				}
			},

			async setPayShengListLevel() {
				let res = await this.$u.get('/orderindicators/list', {
					level: this.gde,
					kind: 1,
				});
				if (res.code == 0) {
					this.indicatorsNumF = res.data[1].indicators
					this.indicatorsNum = res.data[0].indicators
				}
			},

			jump(url) {
				console.log('url: ', url);
				uni.navigateTo({
					url
				});
			},
			click(e) {
				e ? (this.configuration = '全部为复合型') : (this.configuration = '自由配置');
				e ? (this.commodityBNum = 0) : (this.configuration = '自由配置');
				this.commodityTotal = parseInt(this.commodityANum) + parseInt(this.commodityBNum);
			},
			click1(e) {
				e == 0 ? (this.gde = 'A') : e == 1 ? (this.gde = 'B') : (this.gde = 'C');
				this.setPayShengListLevel()
			},
			inputNumA(e) {
				// this.commodityANum = event.target.value;
				// if (this.commodityANum.length > 0 && this.commodityBNum.length > 0) {
				// 	this.commodityTotal = parseInt(this.commodityANum) + parseInt(this.commodityBNum);
				// }
				this.commodityTotal = Number(this.commodityANum) + Number(this.commodityBNum)

			},
			inputNumB(e) {
				this.commodityBNum = event.target.value;
				if (this.commodityANum.length > 0 && this.commodityBNum.length > 0) {
					this.commodityTotal = parseInt(this.commodityANum) + parseInt(this.commodityBNum);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page_box {
		background-color: #f7f7f7;
		margin-top: -5rpx;

		.content_box {
			.head {}

			.fixed {
				width: 100vw;
				position: fixed;
				left: 0;
				transform: translateX(-50);
				bottom: 0;
			}

			.info {
				.commodity {
					.commodity-l {
						width: 320rpx;

						.btn {
							width: 240rpx;
							height: 56rpx;
							background: #fbb03b;
							border-radius: 28rpx;
						}
					}
				}
			}

			.btn {
				width: 210rpx;
				height: 66rpx;
				background: #5b8180;
				border-radius: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}

			.submit {
				.ddd {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #c2c2c2;
				}

				/deep/input {
					width: 70vw !important;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #232323;
				}
			}
		}
	}
</style>
